﻿/* the .swiper functionality is in default.css too, but duplicated here so it's available to see */
.swipeSections .swiper {
    width:100%;
    display: -ms-flexbox;
    -ms-scroll-snap-x: mandatory snapInterval(0%, 80%);
    overflow-x: scroll;
    overflow-y: hidden;
    margin-left: 120px;
}

.swipeSections .swiper > * {
    box-sizing: border-box;
    width: 80%;
    padding-right:80px;
    margin-bottom:16px; /* room for scrollbar */
}

    .swipeSections .swiper > div {
        border:solid 1px gray;
        font-size:x-large;
        color:gray;
        padding-left:30px;
        padding-top:30px;
    }
/* end swiper section */

@media screen and (-ms-view-state: snapped) {
    /* the .swiper functionality is in default.css too, but duplicated here so it's available to see */
    .swipeSections section[role=main]:not(.swiper) > * { margin-left: 20px; }
    .swipeSections .swiper { margin-left: 20px; }
    /* end swiper section */
}